<template>
    <div id="popup">
        <van-search
  v-model="value"
  shape="round"
  background="#ffffff"
  placeholder="520元礼物抢先领"
  show-action
  @search="onSearch"
  @cancel="onCancel"
  @input="onins"
/>  
       <div v-if="sousuoxiangxi==0">
<!-- 历史热门 -->
<histoyHot v-if="num==1"  :lishijilu="lishijilu"   :remensousuo="remensousuo" @lssousuo="lssousuo" ></histoyHot>
<!-- 搜索列表 -->
<searchList v-if="num==0"  :shishisousuolist="shishisouuolist" @zixinxi="xinxi"></searchList>
       </div>
 
        <searchXiangxi v-if="sousuoxiangxi==1" :sousuogoods="sousuogoods" @gd="gds" @qj="qjs" :vals='value' ></searchXiangxi>
      
        <!-- 搜索详情 -->
        
    </div>
</template>

<script>
import histoyHot from '../components/historyHot.vue'
import searchList from '../components/searchList.vue'
import searchXiangxi from '../components/searchXiangxi.vue'
import { Toast } from 'vant';
import {Getchuangkoushuju,Getshishisousuo,Getsousuogoods} from '../request/app.js'
export default {
    data() {
        return {
            value:'',
            num:1,
            lishijilu:[],
            remensousuo:[],
            shishisouuolist:[],
            listxinxi:'',
            // 搜索详细如果为true就显示
            sousuoxiangxi:0,
            // 搜索出来的商品
            sousuogoods:[],
            // 放搜索框的文字
            ssknr:'',
            // 高低
            gd:'',
            // 全部居家
            qj:''
        };
    },
    components:{ 
        histoyHot,
        searchList,
        searchXiangxi
    },
    mounted() {
        
    },
    created(){
        Getchuangkoushuju().then(res=>{
            // console.log(res);
            this.lishijilu = res.data.historyKeywordList
            this.remensousuo = res.data.hotKeywordList
        })
        let val = this.value
        // console.log(val);
        // Getsousuogoods().then(res=>{
        //     // console.log(res);

        // })
        if(val == ''){
            Getchuangkoushuju().then(res=>{
            // console.log(res);
            this.lishijilu = res.data.historyKeywordList
            this.remensousuo = res.data.hotKeywordList
        })
        }
    },
    methods: {  
        onSearch() {
        // let val = this.value

        //     console.log(val);
        //     console.log(1);
         },
    onCancel() {
    //   Toast('取消');
    this.$router.go(-1)
    },
    onins(){
        this.num=0

        let val = this.value
        // console.log(val);
        Getshishisousuo(val).then(res=>{
            // console.log(res);
            this.shishisouuolist = res.data
        })
    },
    xinxi(vals){
        // console.log(vals);
        // console.log(1);
        this.listxinxi = vals
        this.value = vals
        this.sousuoxiangxi = 1
        let val = this.value
        let gdss = this.gd
        let qjss = this.qj
        console.log(val);
        console.log(gdss);
        console.log(qjss);
        Getsousuogoods(val,gdss,qjss).then(res=>{
            console.log(res);
            this.sousuogoods = res.data.data
        })
    },
    lssousuo(item){
        // console.log(item);
        this.value = item
        // Getdjssss(item).then(res=>{
        //     console.log(res);
        //     // this.shishisouuolist = res.data
        //     this.djssss = res.data.data
        // })
        this.sousuoxiangxi = 1
        let val = this.value
            
   
        Getsousuogoods(val).then(res=>{
            console.log(res);
            this.sousuogoods = res.data.data
        })

    },
    gds(res){
        console.log(res);
        this.gd=res
        
    },
    qjs(res){
        console.log(res);
        this.qj=res
    }
    },
};
</script>



<style  scoped>
#popup{
    width: 100%;
    height: 100%;
    background-color: #efefef;
    position: absolute;
    top:0;
    z-index: 999999;
    
}
</style>